<template>
    <IContent :spin-show="loading">
        <div class="box">
            <Alert banner type="warning">订单备注:{{row.order.remark}}</Alert>
            <Row style="padding-bottom: 10px">
                <Col :span="12">
                    <div class="code">
                        <Input placeholder="单号" ref="code" v-model="data.code" @on-enter="enter" clearable>
                            <span slot="prepend">仓单号</span>
                            <Button slot="append" icon="ios-search" @click="enter"></Button>
                        </Input>
                    </div>
                    <div class="code">
                        <Input placeholder="产品条码" ref="barcode" v-model="data.barcode" :disabled="barcodeLoading"
                               @on-enter="enterProduct" clearable>
                            <span slot="prepend">产品条码</span>
                            <Button slot="append" icon="ios-search" @click="enterProduct"></Button>
                        </Input>
                    </div>
                </Col>
                <Col :span="5">
                    <CellGroup>
                        <Cell title="纸箱">
                            <RemoteSelect slot="extra" showCode ref="package" url="common/select/package"
                                          v-model="dataPost.package_id"></RemoteSelect>
                        </Cell>
                        <Cell title="是否使用耗材">
                            <i-switch v-model="dataPost.consumable" slot="extra" :true-value="1"
                                      :false-value="0"></i-switch>
                        </Cell>
                    </CellGroup>
                </Col>
            </Row>


            <div class="list">
                <Table border :columns="columns" :data="row.picking_detail">
                    <template slot-scope="{ row, index }" slot="product">
                        {{row.product.title}}
                    </template>
                    <template slot-scope="{ row, index }" slot="code">
                        {{row.product.code}}
                    </template>
                    <template slot-scope="{ row, index }" slot="consumable">
                        <span v-for="(item,index) in row.product.consumable">{{item.name}}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="scan">
                        {{row.scan}}
                    </template>
                </Table>
            </div>
        </div>
    </IContent>
</template>

<script>
    import IContent from "../../../components/content/index";
    import BoxCell from "../../../components/content/boxCell";
    import RemoteSelect from "../../../components/form/remoteSelect";

    export default {
        name: "index",
        components: {RemoteSelect, BoxCell, IContent},
        data() {
            return {
                loading: false,
                barcodeLoading: false,
                dataPost: {consumable: 1},
                data: {code: '', type: 'order'},
                row: {picking_detail: [], order: {}},
                columns: [{
                    title: '序号',
                    type: 'index',
                    width: 80
                }, {
                    title: '产品名称',
                    slot: 'product'
                }, {
                    title: '产品代码',
                    slot: 'code'
                }, {
                    title: '产品条码',
                    key: 'barcode'
                }, {
                    title: '系统推荐耗材',
                    slot: 'consumable'
                }, {
                    title: '待扫描',
                    key: 'quantity'
                }]
            }
        },
        mounted() {
            this.$store.commit('layout/chooseCollapsed', true);
            this.$nextTick(() => {
                this.restart();
            })
        },
        methods: {
            enter() {
                this.loading = true;
                this.$http.get(`order/shipment/pack`, {
                    params: Object.assign({}, this.data)
                }).then((res) => {
                    this.row = res;
                    this.dataPost.package_id = parseInt(res.config.packing);
                    this.inputFocus('barcode');
                }).finally(() => {
                    this.loading = false
                });
            },
            enterProduct() {
                if (this.barcodeLoading === true) {
                    return;
                }
                this.barcodeLoading = true;

                let row = this.row.picking_detail.find((v) => v.barcode === this.data.barcode);
                if (Boolean(row) && row.quantity > 0) {
                    row.quantity--;
                    this.checkData();
                } else {
                    this.$Modal.warning({
                        title: '警告',
                        content: `产品条码[${this.data.barcode}]请检查是不是拿错了！！`,
                        onOk: () => {
                            this.barcodeLoading = false;
                            this.data.barcode = '';
                            this.inputFocus('barcode');
                        }
                    });
                }

            },
            checkData() {
                let quantity = 0;
                this.row.picking_detail.forEach((res) => {
                    quantity += res.quantity;
                });
                if (quantity === 0) {
                    this.submit();
                } else {
                    this.barcodeLoading = false;
                    this.loading = false;
                    this.data.barcode = '';
                }
            },
            submit() {
                this.loading = true;
                this.$http.post(`order/shipment/${this.row.id}/pack`, this.dataPost).then((res) => {
                    this.$Message.success(`${this.data.code} 打包成功!`);
                }).catch((res) => {
                    this.$Modal.error({
                        title: '失败',
                        content: res.data.message
                    });
                }).finally(() => {
                    this.restart();
                });
            },

            restart() {
                this.dataPost = {consumable: 1};
                this.data = {code: ''};
                this.row = {picking_detail: [], order: {}};
                this.loading = false;
                this.barcodeLoading = false;
                this.inputFocus('code');
            },

            inputFocus(name) {
                this.$refs[name].focus();
            },
        }
    }
</script>

<style scoped lang="less">
    .box {
        background-color: #fff;
        height: 100%;

        .code {
            width: 350px;
            margin: 0 auto;
            text-align: center;
            border-bottom: #fff0f6;
            padding-bottom: 20px;
        }

        .list {
            padding: 20px 0;
            border-top: 1px solid #e8eaec;
        }
    }
</style>
